<template>
	<view class="coupons">
		<view class="coupons-back">
			<image :src="imgRemote+'/mpimg/coupons_back.png'" mode="widthFix"></image>
		</view>
		<view>
			<view class="flex-j-c flex-column align_center" v-if="total==0">
				<image src="/static/img/no_good.png" class="no-bitmap" mode="aspectFit" />
				<text>暂时还没有优惠券可以领取哦~</text>
			</view>
			<view v-else>
				<view v-for="(fitem,findex) in list" :key="findex">

					<view v-for="(item,index) in fitem.data" :key="index" class="sign-coupons">
						<view class="info">
							<image src="/static/img/coupons_red.png"></image>
							<text>￥{{item.discount_money}}</text>
							<text>满{{item.satisfy_money}}元可用</text>
						</view>
						<view class="flex flex-left-right flex-full name">
							<view class="flex-column">
								<text class="fs-16 bold">{{item.name}}</text>
								<text class="fs-12 gray_font" style="margin-top: 20rpx;" v-if="item.use_timedata==2">
									{{item.use_time_info.start_time.substring(0,10)}}至{{item.use_time_info.end_time.substring(0,10)}}</text>
								<text class="fs-12 gray_font" style="margin-top: 20rpx;" v-else>
									领取后{{item.use_time_info}}天内有效
								</text>
							</view>
							<view class="status">
								<block v-if="item.is_start">

									<text @click="receive(item,findex)" v-if="item.is_receive"
										class="now-receive">立刻领取</text>
									<text class="is-receive" v-else>已领取</text>
								</block>
								<text v-else class="no-receive">
									未开始
								</text>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<view style="padding-bottom: calc(env(safe-area-inset-bottom) + 98rpx)"></view>
		<view class="my-coupons">
			<view @click="morePage">查看我的优惠劵</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				list: [],
				total: 0,
				imgRemote:getApp().globalData.imgRemote
			}
		},
		methods: {
			morePage() {
				uni.navigateTo({
					url: 'moreCoupons'
				})
			},
			getList() {
				let params = {
					page: this.page,
					limit: 10
				}
				this.$get(this.$api.cList, params, (res) => {
					if (res.data.code == 1) {
						let {
							data
						} = res.data;

						data.data.forEach((item) => {
							if (item.use_timedata == 2) {
								item.use_time_info = JSON.parse(item.use_time_info)
							}
							let date = (new Date() - 0) / 1000;
							if (date < item.receive_endtime && date > item.receive_starttime) {
								item.is_start = true;
							}

						});
						this.list.push(data);

						this.total = data.total;
					}
				});

			},
			receive(item, index) {
				let params = {
					coupon_id: item.id
				}

				this.$get(this.$api.cReceive, params, (res) => {
					if (res.data.code == 200) {
						this.$Toast('领取成功')
						let params1 = {
							page: index + Number(1),
							limit: 10
						}
						this.$get(this.$api.cList, params1, (res1) => {
							if (res1.data.code == 1) {
								let {
									data
								} = res1.data;

								data.data.forEach((item) => {
									if (item.use_timedata == 2) {
										item.use_time_info = JSON.parse(item.use_time_info)
									}
									let date = (new Date() - 0) / 1000;
									if (date < item.receive_endtime && date > item
										.receive_starttime) {
										item.is_start = true;
									}

								});
								
								this.$set(this.list, index, data);
								this.total = data.total;
							}
						});
					} else {
						this.$Toast(res.data.msg)
					}
				})
			}
		},
		onLoad(data) {
			if(data.name){
				uni.setNavigationBarTitle({
					title:data.name
				})
			}
			this.getList();
		},
		onReachBottom() {
			// if(this.list.length==this.total)return
			this.page++;
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.coupons {

		.coupons-back {
			image {
				width: 100%
			}

			;
		}

		.no-bitmap {
			width: 377rpx;
		}

		.my-coupons {

			position: fixed;

			z-index: 9;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);
			background: white;
			height: 98rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			view {
				width: 690rpx;
				background: #FF3333;
				border-radius: 35rpx;
				color: white;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
			}
		}
	}

	.coupons .sign-coupons {
		margin: 30rpx;
		height: 200rpx;
		background-color: white;
		border-radius: 10rpx 4rpx 4rpx 4rpx;
		display: flex;

		.info {
			width: 204rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 204rpx;
				height: 200rpx;
				position: absolute;
			}

			text {
				position: relative;
				z-index: 4;
				font-size: 40rpx;
				color: white;

				&:last-child {
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}
		}

		.name {
			padding: 0 30rpx;
		}

		.status {
			text {
				display: inline-block;
				width: 120rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;

				border-radius: 20rpx;
				font-size: 22rpx;
			}

			.now-receive {
				color: white;
				background: linear-gradient(#FF7A7A, #FF3333);
			}

			.is-receive {
				color: #fff;
				// border: 1px solid #FF3333;
				background: #999;
				// background: none;
			}

			.no-receive {
				color: white;
				background: #999;
			}
		}

	}
</style>
